---
title: "Checkbox Group"
description: A collection of checkboxes that enables users to select multiple options from a predefined list.
order: 7
published: true
references: ["https://react-spectrum.adobe.com/react-aria/CheckboxGroup.html#props"]
---

## Basic
A group of checkboxes that lets you select multiple options at once.
<How toUse="forms/checkbox/checkbox-group-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/checkbox
```

## Composed components
<Composed components={['field']}/>

## Manual installation
```bash
npm i react-aria-components @heroicons/react
```

<SourceCode toShow='checkbox'/>

## Anatomy
```
import { Checkbox, CheckboxGroup } from "@/components/ui/checkbox"
import { Description, Label } from "@/components/ui/field"
```

```
<CheckboxGroup defaultValue={["delete"]}>
  <Label>User Permissions</Label>
  <Description>
    Select the permissions you want to grant to the user.
  </Description>
  <Checkbox value="read">
    <Label>Read</Label>
    <Description>
      Can view content but cannot make changes.
    </Description>
  </Checkbox>
  <Checkbox value="write">
    <Label>Write</Label>
    <Description>
      Can create and modify existing content.
    </Description>
  </Checkbox>
  <Checkbox value="delete">
    <Label>Delete</Label>
    <Description>Can permanently remove content.</Description>
  </Checkbox>
  <Checkbox value="admin">
    <Label>Admin</Label>
    <Description>
      Full access to all actions and settings.
    </Description>
  </Checkbox>
</CheckboxGroup>
```

## Description
Add a description to the checkbox group using the `description` prop.
<How minW60 toUse="forms/checkbox/checkbox-group-description-demo" />

## Validation
The checkbox group is in an error state.
<How toUse="forms/checkbox/checkbox-group-validation-demo" />

## Indeterminate
The checkbox group is in an indeterminate state.
<How toUse="forms/checkbox/checkbox-group-indeterminate-demo" />

## Controlled
Control the checkbox group value with the `value` prop.
<How minW60 toUse="forms/checkbox/checkbox-group-controlled-demo" />

## Uncontrolled
Control the checkbox group value with the `defaultValue` prop.
<How minW60 toUse="forms/checkbox/checkbox-group-uncontrolled-demo" />

## Disabled
Disable the entire checkbox group by passing the `isDisabled` prop.
<How minW60 toUse="forms/checkbox/checkbox-group-disabled-demo" />

## Read Only
When you need just a read-only checkbox group, pass the `isReadOnly` prop.
```
<CheckboxGroup isReadOnly/>
```
